<template>
    <div class="page">
       <div class="equipment-sum">
          <div class="equipment-sum-son">
                <div class="equipment-sum-usage equipment-son-section">
                  <div class="corner-text">
                    <span> 设备使用情况 </span>
                  </div>
                    <p class="equipment-use-text">{{equipment_use}}</p>
                    <img class="big-icon-png" src="../../../assets/icons/equipment-sum.png"/>
                </div>
                <div class="equiment-usage-detail equipment-son-section">
                    <div class="equiment-usage-section1 equipment-son-section-part1" @click="chnage_detail()">
                       <div>
                         <h3>使用情况</h3>
                         <p>{{using_normal}}</p>
                       </div>
                        <img class="small-icon-png" src="../../../assets/icons/equipment-detail.png"/>
                    </div>
                    <div class="equiment-usage-section2 equipment-son-section-part2">
                      <div>
                         <el-button type="primary" class="long-button">使用详情</el-button>
                      </div>
                      <div>
                         <el-button type="primary" class="long-button">预约详情</el-button>
                      </div>
                    </div>
                </div>
                <div class="equipment-warning equipment-son-section ">
                    <div class="equipment-warning-section1 equipment-son-section-part1">
                      <div>
                        <h3>异常项</h3>
                        <p>{{using_abnormol}}</p>
                      </div>
                      <img class="small-icon-png" src="../../../assets/icons/warning.png"/>
                        
                    </div>
                    <div class="equipment-warning-section2 equipment-son-section-part2">
                      <el-button type="primary" class="long-button">异常查看</el-button>
                    </div>
                </div>
          </div>
          <div class="equipment-sum-son">
            <div class="equipment-sum-fix equipment-son-section equipment-sum-usage">
                  <div class="corner-text">
                    <span> 设备报修情况 </span>
                  </div>
                    <p class="equipment-use-text">{{error}}</p>
                      <img class="big-icon-png" src="../../../assets/icons/equipment-fix.png"/>
                </div>
                <div class="equiment-fix-detail equipment-son-section">
                  <div class="fix-reason">
                       <h4>原因一</h4>
                        <p>2</p>
                  </div>
                  <div class="fix-reason">
                       <h4>原因二</h4>
                        <p>2</p>
                  </div>
                  <div class="fix-reason">
                       <h4>原因三</h4>
                        <p>3</p>
                  </div>
                </div>
          </div>
       </div>
       <div class="equipment-usage-month">
        <div class="title">
          <h1>月设备使用情况</h1>
        </div>
        <div class="charts">
          <div class="echarts1" id="month_echart" >
          </div>
          <div class="bar2" id="container" >
          </div>
        </div>
       </div>
    </div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入柱状图
require('echarts/lib/chart/pie');
require("echarts/lib/chart/line")
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
    data(){
        return{
            equipment_use:"88/103",
            using_normal:86,
            using_abnormol:2,
            error:"15 / 80",
            error_list:[{num:5},{num:5},{num:5}],
            list:{
                value:[1,2,3,4,5,6,7],
                label:["1","2","3","4","5","6","7"]
            },
        }
    },
    mounted(){
        this.drawBar();
        this.draw_line()

    },
    methods:{
        drawBar(){
        // 基于dom，初始化echarts实例

     let data=[];
           for(var i=0;i<30;i++){
             data.push(Math.floor(Math.random()*1000+20))
           }

           let option = {
               title : {
                   text: '月设备使用情况',
               },
               tooltip : {
                   trigger: 'axis',
                   backgroundColor:' rgba(23, 99, 143, 0.75)' ,
                   padding:[5,10],
                   formatter(params){
                    let point=params[0];
                    return '2021年'+point.name+'月 : '+point.value
                   }
               },
               legend: {
                   data:['2021'],
                   textStyle: {
                     color: '#7aaab8',
                     fontSize:14
                   },

               },

               calculable : true,

               xAxis : [
                   {
                     name : '(月)',
                     nameLocation: 'end',
                     nameTextStyle:{
                     color: '#292929',
                     fontSize:16,
                     padding:[50, 0, 0, 10]
                    },
                       type : 'category',
                       boundaryGap : false,
                       data : ['1','2','3','4','5','6','7','8','9','10','11','12',"13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","29","30"],
                       axisLine: {
                         show: false
                       },
                       axisTick: {
                           show: false
                       },
                       offset:10,
                       axisLabel: {
                           show:true,
                           textStyle: {
                             color: '#292929',
                             fontSize:16
                           }
                       },
                       axisPointer:{ //基准线
                         lineStyle:{
                          color:'rgb(46, 148, 245)'
                        }
                       }

                   }
               ],


               yAxis : [
                   {
                     axisLabel: {
                       show:true,
                       textStyle: {
                         color: '#292929',
                         fontSize:16
                       }
                    },
                    axisTick: {
                       show: false
                   },
                   axisLine: {
                       show: false
                   },
                   offset:10,
                   splitLine: {
                     show: true,
                     lineStyle:{
                         type:'dashed',
                         color: [' #292929b9']

                     }
                   }
                 }
               ],
               series : [
                   {
                       name:'2021',
                       type:'line',
                       smooth:true,
                       symbolSize: 10,   //设定实心点的大小
                       lineStyle:{
                         color:'#07bdf5' //改变折线颜色
                       },
                       lineWidth:2,
                       itemStyle: {
                         normal: {
                            areaStyle: {type: 'default'},
                            color: new echarts.graphic.LinearGradient(
                                 0, 0, 0, 1,
                                 [
                                     {offset: 0, color: '#1c61f5'},
                                     {offset: 0.5, color: '#1c93f5be'},
                                     {offset: 1, color: '#70d3eca6'}
                                 ]
                             ),
                            borderColor:'#1d9aee',//拐点边框颜色
                            borderWidth:2//拐点边框大小
                         }},
                        data:data
                   },

               ]
           };
           let myChart = echarts.init(document.getElementById('month_echart'));
           myChart.setOption(option);
      },
     draw_line(){
         var date=this.list
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var option = null;
			option = {
						 backgroundColor:"transparent",
						 tooltip: {
							 show: true,
							 formatter: "{b}:{c}"
							 },
					 grid: {
							 left: '5%',
							 top: '12%',
							 right: '1%',
							 bottom: '8%',
							 containLabel: true
							 },
					 
						 xAxis: {
								 type: 'category',
								 axisTick: {
									 show: false,
									 alignWithLabel: false,
									 length: 5,
		 
								 },
								 "splitLine": { //网格线
									 "show": false
								 },
								 inverse: 'true', //排序
								 axisLine: {
									 show: false,
									 lineStyle: {
										 color: '#fff',
									 }
								 },
								 data:date.label
							 },
						 yAxis: [{
							 type: 'value',
							 show:false,
							 position: 'top',
							 axisTick: {
								 show: false
							 },
							 axisLine: {
								 show: false,
								 lineStyle: {
									 color: '#fff',
								 }
							 },
							 splitLine: {
								 show: false
							 },
						 }],
						 series: [{
								 name: '能耗值',
								 type: 'bar',
								 label: {
									 normal: {
										 show: true,
										 position: 'top',
										 formatter: '{c}',
										 textStyle: {
											 color: 'white' //color of value
										 }
									 }
								 },
								 itemStyle: {
									 //通常情况下：
									 normal: {
										 barBorderRadius: 8,
										 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
										 color: function (params) {
											 var colorList = [
												 ['#b250ff', 'rgba(11,42,84,1)'],
												 ['#ff9717', 'rgba(11,42,84,1)'],
												 ['#61dbe8', 'rgba(11,42,84,1)'],
												 ['#1ace4a', 'rgba(11,42,84, 1)'],
											 ];
											 var index = params.dataIndex;
											 if (params.dataIndex >= colorList.length) {
												 index = params.dataIndex - colorList.length;
											 }
											 return new echarts.graphic.LinearGradient(0, 0, 0, 1,
												 [{
														 offset: 0,
														 color: colorList[index][0]
													 },
													 {
														 offset: 1,
														 color: colorList[index][1]
													 }
												 ]);
										 },
									 },
								 },
								 barGap: '0%',
								 barCategoryGap: '50%',
								 data:date.value
							 }]
					 };           
		 
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
            }

        }
</script>
<style  scoped>
.page{
  padding:25px;
  width: 100%;
  background: #F7F7F7;

}
.equipment-sum{
  display: flex;
  flex:1;
  justify-content: space-between;
}
.equipment-sum-son{
  width: 48%;
  display: flex;
  /* flex-grow:1; */
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  background: #FFFFFF;
  box-shadow: 0px 2px 14px 0px rgba(219, 219, 219, 0.5);
  border-radius: 10px;
  border: 1px solid #D6D6D6;
}
.equipment-son-section{
  margin-bottom: 14px;
}
.equipment-sum-usage{
  background: #D8D8D8 linear-gradient(360deg, #E6F1F8 0%, #4A96FA 100%);
  box-shadow: 0px 2px 10px 4px rgba(203, 203, 203, 0.5);
  border-radius: 10px;
}
.equipment-use-text{
  font-size: 48px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 67px;
  text-align: center;
  margin: 10px 0 0 0;
}

.equiment-usage-detail{
  display: flex;
  justify-content: space-between;
}
.equipment-son-section-part1{
  width: 50%;
  box-shadow: 0px 4px 11px 0px rgba(152, 152, 152, 0.5);
  border-radius: 10px;
  height: 65px;
}
 .big-icon-png{
  width: 45px;
  float: right;
  margin: 0 10px 10px 0;
}
 .small-icon-png{
  width: 25px;
  float: right;
  margin: -35px 10px 10px 0;
}
.equipment-son-section-part1 h3{
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  margin: 20px;
  display: inline-block;
}
.equipment-son-section-part1 p{
  display: inline-block;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.equiment-usage-section1{
  background: #78D3B3;
}

.equipment-son-section-part2{
  width: 40%;
  display: flex;
  flex-direction: column;
}
.equiment-usage-section2{
 
  justify-content: space-between;
}
.equipment-warning-section2{
  justify-content: top;
}
.long-button{
  background-color: #4C97F9; 
  box-shadow: 0px 4px 11px 0px rgba(152, 152, 152, 0.5);
  width: 100%;
  height: 30px;
  border: none;
}
.equipment-warning-section2 .long-button{
 background-color:#FBA847;
}

.equipment-warning{
  display: flex;
  justify-content: space-between;
}

.equipment-warning-section1{
  background: #FBA847;
  box-shadow: 0px 4px 11px 0px rgba(152, 152, 152, 0.5);
  border-radius: 10px;
}

.corner-text{
  background: #096BFF;
  border-radius: 10px 0px 10px 0px; 
  width: 128px;
  text-align: center;
}
.corner-text span{
  font-size: 14px;
  line-height: 35px;
  color: #FFFFFF;
  font-family: PingFangSC-Medium, PingFang SC;
}
.equiment-fix-detail{
  display: flex;
  justify-content: space-between;
}
.fix-reason{
  width: 30%;
  background: #D8E9FF;
  box-shadow: 2px 2px 7px 0px rgba(167, 167, 167, 0.5);
  border-radius: 10px;
  text-align: center;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4B97F9;}
  .fix-reason h4{
    font-size: 12px;
  }
  .fix-reason p{
    font-size: 24px; 
  }

.equipment-usage-month{
  background: linear-gradient(180deg, #4794F9 0%, #C2DCFF 100%);
  box-shadow: 0px 10px 15px 0px rgba(162, 162, 162, 0.5);
  border-radius: 10px;
  padding: 0 25px 25px 25px;
}
  .title{
    margin: 15px;
  }
    .title h1{
      font-size: 21px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      background: #096BFF;
      border-radius: 0px 0px 10px 10px;
      width: 272px;
      line-height: 50px;
      margin: 0 auto;
      text-align: center;
    }
.charts{
  background: #FFFFFF;
  border-radius: 10px;
  padding: 13px;
}
  .echarts1{
    width: 100%;
    height: 50vh;
    }
  .bar2{
      width: 90%;
      margin: 0 auto;
      height: 50vh;
      background: #0e0525; 
      border-radius: 16px;
  }

</style>